<!-- 合同列表 -->
<!-- 合同列表 -->
<!-- 合同列表 -->
<template>
  <div>
    <myDivider name="服务电话管理"></myDivider>

    <!-- 顶部搜索 -->
    <div class="top">
      <el-input style="width: 250px;margin-right: 10px;" v-model="keytitle" placeholder="根据小区名称搜索"></el-input>
      <el-button type="primary" @click="SouSuo">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="name" label="小区名称">
        </el-table-column>
        <el-table-column align="center" prop="count" label="电话数量">

        </el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <!-- <el-button size="small" icon="el-icon-phone" @click="Preview('List', scope.row)"
              type="primary">服务电话列表</el-button> -->
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="16">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="Preview('List', scope.row)">服务电话列表</span>
                </el-col>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="toCell(scope.row)">编辑</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- 所有弹窗 -->
    <el-dialog ref="dialogVisible" title="服务电话列表" :visible.sync="dialogVisible" width="500px">
      <el-table height="400" :data="tableListData" style="width: 100%">
        <el-table-column align="center" prop="name" label="服务名称">
        </el-table-column>
        <el-table-column align="center" prop="phoneNumber" label="电话">
        </el-table-column>
      </el-table>

    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      keytitle: '',
      // 表格数据
      tableData: [],//首页表格
      tableListData: [
      ],//弹窗 服务电话列表
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
    }
  },
  async activated() {
    this.keytitle = ''
    this.getTableList()
  },
  deactivated() {

  },
  methods: {
    toCell(row) {
      localStorage.setItem('XiaoQuId', row.id);
      var id = row.id;
      this.$router.push({ path: '/residential/reDetail', query: { id: id, operateType: 'binding',tabType:'phone' } });
    },
    async Preview(formName, row) { //表格按钮
      console.log(row, '点击');
      switch (formName) {
        case 'List':
          this.dialogVisible = true
          let res = await this.$api.phone.getPhoneList({
            "name": "", //名称
            "phoneNumber": "",//电话号
            "residentialId": row.id, //小区id
            "pageSize": 100000,
            "pageNum": 1
          })
          console.log(res, '机构电话');

          this.tableListData = res.data.list
          break

      }
    },
    reset() {
      this.keytitle = ''
      this.pageNum = 1
      this.getTableList()
    },
    SouSuo() {
      // 如果点搜索的时候，当前页数在2的话，就会传2，数据少的时候获取第二页数据则会没有，所以需要手动改为1
      this.pageNum = 1
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    async getTableList() { // 获取表格列表
      let logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
      let params = {
        "name": this.keytitle, //名称
        "pageSize": this.pageSize,
        "pageNum": this.pageNum,
        unitType: logOnUser.unitType,
        unitId: logOnUser.unitId
      }
      let res = await this.$api.phone.getAllPhoneList(params)
      this.tableData = res.data.list
      this.total = res.data.total
    },
  },
}
</script>

<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.top {
  margin-top: 35px;
}

.tableBox {
  margin-top: 50px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {}
    }
  }

  .SeeDetail {
    cursor: pointer;
    font-weight: 600;
    margin-left: 10px;
  }

  .ellSpan {
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 溢出部分显示省略号 */
  }
}
</style>